<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <link rel="stylesheet" type="text/css" href="css/public.css">
  <!-- 轮播图 -->
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.jslides.js"></script>
  <!-- 滚动效果 -->
  <script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>
</head>
<body>
  <!-- 头部 开始 -->
  <div class="header">
    <div class="header_bg"></div>
    <div class="wrap clearfix">
      <div class="logo"><img src="images/logo.png" alt=""></div>
      <div class="phone"><p>400-085-0655</p></div>
      <ul>
        <li><a class="on" href="#">首页</a></li>
        <li><a href="#">品牌介绍</a></li>
        <li><a href="#">产品中心</a></li>
        <li><a href="#">授权查询</a></li>
        <li><a href="#">瞳年资讯</a></li>
        <li><a href="#">视频中心</a></li>
        <li><a href="#">用户反馈</a></li>
      </ul>
    </div>
  </div>
  <!-- 头部 结束 -->
  <!-- 轮播图 开始 -->
  <div class="banner">
    <div id="full-screen-slider">
    	<ul id="slides">
    		<li style="background:url('images/banner1.jpg') no-repeat center top"><a href="#" target="_blank"></a></li>
    		<li style="background:url('images/banner2.jpg') no-repeat center top"><a href="#" target="_blank"></a></li>
    		<li style="background:url('images/banner3.jpg') no-repeat center top"><a href="#" target="_blank"></a></li>
    	</ul>
    </div>
  </div>
  <!-- 轮播图 结束 -->
  <!-- 眼镜 开始 -->
  <div class="glass" style="background-color: #fbfbfb;">
    <div class="title">
      <div class="top">
        <div class="container">
          <img src="images/glass1.png" alt="">
        </div>
      </div>
      <div class="btm">
        <p class="p1">DETAILS WITH FEELINGS DF  HAPPINESS</p>
        <p class="p2">瞳年眼睛   用细节感受幸福</p>
        <hr>
        <i></i>
      </div>
    </div>
    <div class="content clearfix">
      <ul>
        <li>
          <img src="images/glass2.png" alt="">
          <p>品味优雅 纯美典雅</p>
        </li>
        <li>
          <img src="images/glass3.png" alt="">
          <p>型材兼具 独特风味</p>
        </li>
        <li>
          <img src="images/glass4.png" alt="">
          <p>简约精选 诠释经典</p>
        </li>
        <li>
          <img src="images/glass5.png" alt="">
          <p>酷炫时尚  摩登品味</p>
        </li>
      </ul>
    </div>
  </div>
  <!-- 眼镜 结束 -->
  <!-- 了解更多 开始 -->
  <div class="more">
    <div class="wrap">
      <div class="good"><img src="images/more1.png" alt=""></div>
      <div class="container">
        <p>瞳年超能量眼镜其镜片采用特殊研制的进口材料，在镜片表面镀制了多层高效防蓝光膜层，有效阻挡蓝光和抵御紫外线功能。</p>
        <a href="#">了解更多 >></a>
      </div>
    </div>
  </div>
  <!-- 了解更多 结束 -->
  <!-- 产品展示 开始 -->
  <div class="zhanshi wrap">
    <div class="title_common">
      <p>Products Exhibition</p>
      <h3>产品展示</h3>
      <span></span>
    </div>
    <div id="notice" class="notice">
  		<div id="notice-tit" class="notice-tit clearfix">
  		  <ul>
  		  	<li class="select"><a href="javascript:void(0)">专属定制</a></li>
  		  	<li><a href="javascript:void(0)">男款</a></li>
  		  	<li><a href="javascript:void(0)">女款</a></li>
  		  	<li><a href="javascript:void(0)">小孩</a></li>
  		  </ul>
  		</div>
  		<div id="notice-con" class="notice-con">
  			<div class="mod" style="display:block">
          <div class="friend">
              <div class="mr_frbox">
                  <img class="mr_frBtnL prev" src="images/left.png" />
                  <div class="mr_frUl">
                      <ul>
                          <li>
                              <a href="#">
                                  <img src="images/i.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i2.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li><li>
                              <a href="#">
                                  <img src="images/i3.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i4.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                      </ul>
                  </div>
                  <img class="mr_frBtnR next" src="images/right.png" />
              </div>
          </div>
  			</div>
  			<div class="mod" style="display:none">
          <div class="friend">
              <div class="mr_frbox">
                  <img class="mr_frBtnL prev" src="images/left.png" />
                  <div class="mr_frUl">
                      <ul>
                          <li>
                              <a href="#">
                                  <img src="images/i1.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i22.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li><li>
                              <a href="#">
                                  <img src="images/i33.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i44.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                      </ul>
                  </div>
                  <img class="mr_frBtnR next" src="images/right.png" />
              </div>
          </div>
  			</div>
  			<div class="mod" style="display:none">
          <div class="friend">
              <div class="mr_frbox">
                  <img class="mr_frBtnL prev" src="images/left.png" />
                  <div class="mr_frUl">
                      <ul>
                          <li>
                              <a href="#">
                                  <img src="images/i.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i2.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li><li>
                              <a href="#">
                                  <img src="images/i3.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i4.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                      </ul>
                  </div>
                  <img class="mr_frBtnR next" src="images/right.png" />
              </div>
          </div>
  			</div>
  			<div class="mod" style="display:none">
          <div class="friend">
              <div class="mr_frbox">
                  <img class="mr_frBtnL prev" src="images/left.png" />
                  <div class="mr_frUl">
                      <ul>
                          <li>
                              <a href="#">
                                  <img src="images/i1.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i22.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li><li>
                              <a href="#">
                                  <img src="images/i33.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                          <li>
                              <a href="#">
                                  <img src="images/i44.jpg" />
                                  <div><p>更多详情</p></div>
                              </a>
                              <h3>2016新品</h3>
                              <p>超清高清偏光太阳镜</p>
                          </li>
                      </ul>
                  </div>
                  <img class="mr_frBtnR next" src="images/right.png" />
              </div>
          </div>
  			</div>
  		</div>
  	</div>
    <div class="news_link">
      <a href="#">more >></a>
    </div>
  </div>
  <!-- 产品展示 结束 -->
  <!-- 产品优势 开始 -->
  <div class="youshi">
    <div class="title_common">
      <p>Product Advantage</p>
      <h3>产品优势</h3>
      <span></span>
    </div>
    <div class="youshi_list clearfix">
      <ul>
        <li>
          <img src="images/youshi5.png" alt="">
          <p>防紫外线</p>
        </li>
        <li>
          <img src="images/youshi1.png" alt="">
          <p>防蓝光</p>
        </li>
        <li>
          <img src="images/youshi2.png" alt="">
          <p>防辐射</p>
        </li>
        <li>
          <img src="images/youshi3.png" alt="">
          <p>抗疲劳</p>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="top clearfix">
        <div class="left"><img src="images/youshi11.png" alt="" /></div>
        <div class="mid">
          <ul>
            <li>阻挡有害蓝光的入侵,保护眼睛。</li>
            <li>卓越的抗紫外线功能。</li>
            <li>提供最佳的视觉清晰度,展现物象本身色彩。</li>
            <li>相比普通防蓝光镜片,底色更自然,更透明，佩戴更美观。</li>
            <li>90%以上的透光率(普通防蓝光镜片透光率仅为80%左右),视觉更舒适。</li>
          </ul>
        </div>
        <div class="right"><img src="images/youshi12.png" alt="" /></div>
      </div>
      <div class="btm clearfix">
        <div class="left">
          <p>选用世界顶级的全新材质TR-90</p>
          <h4>瞳年超能量眼镜</h4>
        </div>
        <div class="mid"><img src="images/youshi21.png" alt="" /></div>
        <div class="right"><img src="images/youshi22.png" alt="" /></div>
      </div>
    </div>
  </div>
  <!-- 产品优势 结束 -->
  <!-- 新闻资讯 开始 -->
  <div class="news">
    <div class="title">
      <p>新闻资讯</p>
      <h3>News</h3>
      <img src="images/news.png" alt="">
    </div>
    <div class="content clearfix">
      <ul>
        <li>
          <img src="images/news1.png" alt="">
          <h3>你还为挑选眼镜品牌发愁吗？</h3>
          <p>眼镜的品牌玲琅满目，亲们是不是挑花眼了
          呢，衣服眼镜是不是也要挑好久呢？今天</p>
          <a href="#">查看详情</a>
        </li>
        <li>
          <img src="images/news2.png" alt="">
          <h3>你还为挑选眼镜品牌发愁吗？挑花眼挑花眼</h3>
          <p>眼镜的品牌玲琅满目，亲们是不是挑花眼了
          呢，衣服眼镜是不是也要挑好久呢？今天挑花眼</p>
          <a href="#">查看详情</a>
        </li>
        <li>
          <img src="images/news3.png" alt="">
          <h3>你还为挑选眼镜品牌发愁吗？</h3>
          <p>眼镜的品牌玲琅满目，亲们是不是挑花眼了
          呢，衣服眼镜是不是也要挑好久呢？今天</p>
          <a href="#">查看详情</a>
        </li>
      </ul>
    </div>
    <div class="news_link">
      <a href="#">more >></a>
    </div>
  </div>
  <!-- 新闻资讯 结束 -->
  <!-- 底部 开始 -->
  <div class="footer">
    <div class="link wrap clearfix">
      <div class="left"><img src="images/footer_logo.png" alt=""></div>
      <div class="mid">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">品牌介绍</a></li>
          <li><a href="#">瞳年资讯</a></li>
          <li class="ll"><a href="#">用户反馈</a></li>
        </ul>
        <p>豫ICP备13006852号-7</p>
      </div>
      <div class="right">
      <p class="p1">郑州市金水区北三环经三路鑫苑金融广场银座1907</p>
      <p class="p2">400-085-0655</p>
      </div>
    </div>
    <div class="share">
      <div class="bdsharebuttonbox">
        <span>关注我们：</span>
        <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
        <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
        <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
      </div>
      <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
    </div>
  </div>
  <!-- 底部 结束 -->
  <!-- 产品展示js -->
  <script type="text/javascript">
    $(document).ready(function () {

      /* 图片滚动效果 */
      $(".mr_frbox").slide({
        titCell: "",
        mainCell: ".mr_frUl ul",
        autoPage: true,
        effect: "leftLoop",
        autoPlay: true,
        vis: 4
      });

      /* 鼠标悬停图片效果 */
      $(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());
      $("li").mouseout(function (e) {
        if ((e.pageX < $(this).offset().left || e.pageX > ($(this).offset().left + $(this).width())) || (e.pageY < $(this).offset().top || e.pageY > ($(this).offset().top + $(this).height()))) {
          $(this).find('.mr_zhe_i').show();
          $(this).find('.mr_zhe_hover').hide().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
          return false;
        }

      });
      $('.mr_zhe').mouseover(function (event) {
        $(this).find('.mr_zhe_i').hide();
        $(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
        return false;
      });

    });
    // 切换tab
    $('#notice-tit li').click(function(){
    $(this).addClass('select').siblings('li').removeClass('select');
    $('#notice-con .mod').eq($(this).index()).show().siblings('.mod').hide();
    });
  </script>
</body>
</html>
